<template>
  <div class="registerBox">
    <h3>管理员资格申请</h3>
    <el-form class="registerForm" @keyup.enter="applyAdmin">
      <el-form-item label="账户:" label-position="right">
        <el-input
          type="text"
          v-model="account"
          placeholder="请输入已有的账户"
        ></el-input>
      </el-form-item>
      <el-form-item label="留言:" label-position="right">
        <el-input v-model="reason" placeholder="请输入申请理由" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="applyAdmin" style="width: 100%">
          提交申请
        </el-button>
      </el-form-item>
      <el-form-item>
        <slot default></slot>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
// import { applyAdminApi } from "@/apis/admin";
import { ElLoading, ElMessage /* ElNotification */ } from "element-plus";

const account = ref("");
const reason = ref("");
const formData = new FormData();

// 申请管理员权限
async function applyAdmin() {
  if (!account.value.trim() || !reason.value.trim()) {
    ElMessage.warning("请输入账户和申请理由！");
    return;
  }
  const loading = ElLoading.service({
    lock: true,
    text: "提交中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  formData.append("account", account.value);
  formData.append("reason", reason.value);
  try {
    // const res = await applyAdminApi(formData);
    // if (res.code === 0) {
    //   ElMessage.success("申请提交成功，等待审核！");
    //   ElNotification({
    //     title: "申请成功",
    //     message: "请耐心等待管理员审核。",
    //     type: "success",
    //     duration: 3000,
    //     offset: 100,
    //   });
    // } else {
    //   ElMessage.error(res.message || "申请失败，请稍后重试！");
    // }
  } catch (error) {
    console.log(error);
    ElMessage.error("提交申请时发生错误！");
  } finally {
    loading.close();
  }
}
</script>

<style scoped>
.registerBox {
  padding: 0.7em 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.registerForm {
  margin-top: 1em;
  max-width: 100%;
}
</style>
